<template>
  <div class="glsplb">
    <div class="sspp">
      <a class="fanhui" @click="$router.back()"> </a>
      <span class="splb">商品列表</span>
      <span class="cdl"></span>
    </div>
    <div class="ssk">
      <div>
        <i></i>
        <span>点击搜索商品</span>
      </div>
    </div>
    <ul>
      <li @click="orderby='def_desc'">默认</li>
      <li @click="orderby='sold_desc'">销量</li>
      <li @click="orderby='price_asc'">价格</li>
      <li>筛选</li>
    </ul>
    <div class="splbs">
      <!--   -->
      <div :id="v.gid" v-for="v in glList" :key="v.gid">
        <div
          @click="changeif(v.gid)"
          v-lazy-container="{
            selector: 'img',
            error: 'https://wap.epet.com/app/images/error.png',
            loading: 'https://wap.epet.com/app/images/loading.png',
          }"
        >
          <img :data-src="v.country_photo" alt="" />
        </div>
        <div
          @click="changeif(v.gid)"
          id="litbs"
          v-lazy-container="{
            selector: 'img',
            error: 'https://wap.epet.com/app/images/error.png',
            loading: 'https://wap.epet.com/app/images/loading.png',
          }"
        >
          <img class="litb" :data-src="v.photo" alt="" />
        </div>

        <div class="wenzi" @click="changeif(v.gid)">
          <p>{{ v.subject }}</p>
          <p>
            <span class="jghong">￥{{ v.sale_price }}</span
            >&nbsp;&nbsp;&nbsp;&nbsp;<span>{{ v.dprice }}</span>
          </p>
          <p>{{ v.comments }}{{ v.sold }}</p>
        </div>
        <div @click="addCar(v)" class="gwcat">
          <img
            src="https://static.epetbar.com/static_wap/epetapp/pages/index/images/addcart.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <addvit class="addcg" v-show="isAdd"></addvit>
  </div>
</template>

<script>
import addvit from "../pub/addvit.vue";
export default {
  name: "glsplb",
  data() {
    return {
      glList: null,
      cateid: "",
      pageNum: 1,
      isAdd: false,
      orderby:'def_desc'
    };
  },
  components: {
    addvit,
  },
  // 销量 https://mallcdn.api.epet.com/v3/goods/list/main.html?version=358&brandid=0&page=1&orderby=sold_desc&cateid=7&pet_type=dog&extend_pam=&real_wid=&region=&atid=&system=wap&isWeb=1&distinct_id=17c4dcad9d349b-0277e5edad1932-5437971-250125-17c4dcad9d4913&_=1633657043864
  // 价格 https://mallcdn.api.epet.com/v3/goods/list/main.html?version=358&brandid=0&page=1&orderby=price_asc&cateid=7&pet_type=dog&extend_pam=&real_wid=&region=&atid=&system=wap&isWeb=1&distinct_id=17c4dcad9d349b-0277e5edad1932-5437971-250125-17c4dcad9d4913&_=1633657253832
  // 价格下 （降序） https://mallcdn.api.epet.com/v3/goods/list/main.html?version=358&brandid=0&page=1&orderby=price_desc&cateid=7&pet_type=dog&extend_pam=&real_wid=&region=&atid=&system=wap&isWeb=1&distinct_id=17c4dcad9d349b-0277e5edad1932-5437971-250125-17c4dcad9d4913&_=1633657378246
  methods: {
    async reques() {
      let glList = await this.axios({
        url: `https://mallcdn.api.epet.com/v3/goods/list/main.html?version=358&brandid=0&page=${this.pageNum}&orderby=${this.orderby}&cateid=${this.cateid}&pet_type=dog&extend_pam=&real_wid=&region=&atid=&system=wap&isWeb=1&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&_=1633149935136`,
      });
      if (this.glList) {
        this.glList = this.glList.concat(glList.data.list);
      } else {
        this.glList = glList.data.list;
      }
    },
    async addCar(v) {
      // console.log(v);
      let gCar = await this.axios(
        `https://mall.api.epet.com/v3/cart.html?do=addToCart&gid=${v.gid}&extend_pam=&system=wap&isWeb=1&version=303&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c`
      );
      // console.log(gCar);
      this.$set(v, "shuNum", 1);
      let ytj = JSON.parse(localStorage.getItem("goCarList"));

      if (ytj) {
        let isAdd = ytj.some((a) => {
          return a.gid == v.gid;
        });
        if (isAdd) {
          alert("已添加！请勿重复添加");
          return;
        }
      }
      if (gCar.data.msg == "商品已成功加入购物车！") {
        this.isAdd = true;
        if (localStorage.getItem("goCarList")) {
          // console.log(localStorage.getItem("goCarList"));
          // console.log(JSON.parse(localStorage.getItem("goCarList")));
          // // console.log(v);
          // console.log((JSON.parse(localStorage.getItem("goCarList"))).concat([v]));

          localStorage.setItem(
            "goCarList",
            JSON.stringify(
              JSON.parse(localStorage.getItem("goCarList")).concat([v])
            )
          );
        } else {
          localStorage.setItem("goCarList", JSON.stringify([v]));
        }
        // JSON.stringify(v);
      }
    },
    changeif(gid) {
      this.$router.push({
        name: "spInfo",
        query: { gid },
      });
    },
  },

  created() {
    this.cateid = this.$route.query.name;
    // console.log(this.$route.query.name);
    this.busvue.$on("isaddcg", (data) => {
      this.isAdd = data;
    });
  },
  activated() {
    this.cateid = this.$route.query.name;
    // console.log(this.$route.query.name);
    // console.log(this.$route.params.ssList);
    this.glList = this.$route.params.ssList;
  },
  mounted() {
    this.busvue.$on("isendgl", (data) => {
      if (data) {
        this.pageNum++;
        this.reques();
      }
    });
  },
  watch: {
    cateid() {
      this.glList = null;
      this.reques();
      // console.log(glList.data.list);
    },
    orderby(){
       this.glList = null;
      this.reques();
    }
  },
};
</script>

<style lang="less" scoped>
.addcg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 13.34rem !important;
  background-color: rgba(0, 0, 0, 0.521);
}
.gwcat {
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  bottom: 0.2rem;
  right: 0.2rem;
  > img {
    width: 100%;
  }
}
.glsplb {
  .sspp {
    background-color: #fff;
  }
  > ul {
    display: flex;
    > li {
      display: block;
      width: 25%;
      height: 0.8rem;
      line-height: 0.8rem;
      text-align: center;
      font-size: 0.3rem;
    }
    border-bottom: 1px solid rgb(233, 233, 233);
  }
  > div {
    width: 100%;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    border-bottom: 1px solid rgb(238, 233, 233);
    .splb {
      font-size: 0.36rem;
      position: relative;
      top: -0.2rem;
    }
  }
  > .ssk {
    > div {
      width: 6.7rem;
      height: 0.8rem;
      line-height: 0.8rem;
      margin: 0.2rem auto;
      border-radius: 0.1rem;
      text-align: left;
      background-color: rgb(246, 246, 246);
      > i {
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        margin: 0rem 0 0 0.8rem;
        background: url(https://static.epetbar.com/static_wap/epetapp/pages/goods_list/images/brands-ico.png)
          no-repeat;
        position: relative;
        top: -0.21rem;
        background-size: 200px auto;
        background-position: -51px -76px;
      }
      > span {
        font-size: 0.3rem;
        position: relative;
        top: -0.23rem;
        color: rgb(180, 180, 180);
      }
    }
  }
  > .splbs {
    border: 0;
  }
}
.fanhui {
  margin: 0;
  position: absolute;
  left: 5px;
  width: 35px;
  height: 35px;
  top: 7px;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 35px auto;
  background-position: 0 0;
}

.cdl {
  margin: 0;
  top: 7px;
  right: 5px;
  width: 35px;
  height: 35px;
  background: url(https://static.epetbar.com/static_web/wap/dist/images/background/topIco.png)
    0 0 no-repeat;
  background-size: 35px auto;
  position: absolute;
  background-position: 0 -70px;
}
.splbs {
  > div {
    font-size: 0.26rem;
    position: relative;
    // line-height: 0;
    display: flex;
    border-bottom: 1px solid rgb(241, 237, 237);
    // background-color: rgb(250, 174, 174);

    > div:nth-child(1) {
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
      width: 0.5rem;
      height: 0.5rem;
      overflow: hidden;
      border-radius: 0.25rem;
      height: 0.5rem !important;
      > img {
        margin-left: -0.2rem;
        width: 1rem;
        height: 0.6rem;
      }
    }
    > div {
      line-height: 0.3rem;
      > p {
        text-align: left;
        > .jghong {
          color: rgb(255, 3, 3);
        }
      }
      > p:nth-child(2) {
        position: relative;
        top: 0.1rem;
        opacity: 0.8;
      }
      > p:nth-child(3) {
        font-size: 0.24rem;
        opacity: 0.8;
      }
    }
    #litbs {
      display: block;
      width: 2rem !important;
      height: 100%;
      text-align: center;
      // margin: 0.2rem;
      padding: 0;
    }
    .litb {
      width: 100%;
      margin: 0 auto;
    }
    .wenzi {
      width: 5rem;
      margin-left: 0.2rem;
    }
  }
}
</style>